import React,{memo,useRef, useState, useEffect} from "react";
import './server.css'
import {connect} from 'react-redux'
import Scroll from '../../baseUI/scroll/index'
import LoadingIcon from '../../components/LoadingIcon/LoadingIcon'
import * as actionTypes from './store/actionCreators'
import play from '../../assets/images/play.png'
import ControlSong from '../../baseUI/Control/controlSong.jsx'
let mvid = 14276994;
let pageNo = 0;
let mvsArray=[];
const Server = (props) =>{
  const {getDetailDataDispatch,mv=[],mvDetail={}} =props
  const videoRef = useRef();
  const [MVID,setMVID] = useState(0)
  const [page,setPage] = useState(0)
  mvid = MVID
  console.log(mv,'----');
  useEffect(() => {
    if (!props.length) {
        getDetailDataDispatch()
    }
    getDetailDataDispatch()

}, [])
const handlePullUp = () => {
  // console.log(mvsArray,'111111111')
  mvsArray = [...mvsArray, ...mv];
  // console.log('上啦');
  setPage(page+10)
  ;
  pageNo=page
  // console.log(mvsArray,'22221111')
  // console.log(pageNo,'no')
}
useEffect(()=>{
  if(mvsArray.length==0){
      mvsArray=mv
  }
  
},[mv])
useEffect(() => {
  if (!props.length) {
      getDetailDataDispatch()
  }
  getDetailDataDispatch()

}, [pageNo])
useEffect(() => {
  if (!props.length) {
      getDetailDataDispatch()
  }
  getDetailDataDispatch()

}, [MVID])
useEffect(() => {
  if (!props.length) {
      getDetailDataDispatch()
  }
  getDetailDataDispatch()

}, [mvid])
    return (
        <>
        <div className="mv_scroll_container">
        <video  src={mvDetail.url} controls autoPlay className="mv_video" style={{visibility:"hidden"}} ref={videoRef}>
          
          </video>
        <Scroll direction="vertical" refresh = {false} pullUp={handlePullUp}>
           <div>
           
             {
               mvsArray.length?mvsArray.map((item,index)=>{
                 return(
                   <div className="mv_cover" style={{backgroundImage:`url(${item.cover})`}} key={index} onClick={()=>{setMVID(item.id);videoRef.current.style.visibility="visible"}}>
                      <div className="mv_container">
                        <div className="mv_name">{item.name}</div>
                        <div className="mv_author">{item.artistName}</div>
                        </div>
                   </div>
                 )
               }):<></>
             }
         
           
          

           </div>

        </Scroll>
        
        {/* <ControlSong /> */}
        {/* <LoadingIcon/> */}
        </div>
        </>
    )
}
const mapStateToDispatch = (dispatch) => {
  // console.log(dispatch); 
 
  return {
      getDetailDataDispatch() {
          
          dispatch(actionTypes.getMV(pageNo))
          dispatch(actionTypes.getMVDetail(mvid))
          
      }
  }
}
const mapStateToProps = (state) =>{
    return {
        mv:state.server.mv,
        mvDetail:state.server.mvDetail
        }
}
export default connect(mapStateToProps,mapStateToDispatch)(memo(Server));